<template>
	<view class="wrapper">
		<view class="header">
			<view class="navigate">
				<view class="left">
					<uni-icons type="left" size="27" color="#262626" @click="navback"></uni-icons>
				</view>
				<view class="center">
					<view class="center-title-wrpper">
						<view class="title">委托交易</view>
						<view class="subtitle">鲁*67***488</view>
					</view>
					<view class="center-icon"><uni-icons type="down" size="20" color="#262626"></uni-icons></view>
					</view>
				<view class="right">
					<uni-icons type="search" size="25" color="#262626" ></uni-icons>
				</view>
			</view>
		</view>
		<view class="center-warpper">
			<view class="ctype-wrapper">
				<view class="ctype-type-li active">买入</view>
				<view class="ctype-type-li">卖出</view>
				<view class="ctype-type-li">撤单</view>
				<view class="ctype-type-li">持仓</view>
				<view class="ctype-type-li">委托成交</view>
			</view>
			<view class="type-list">
				<view class="type active">当日成交</view>
				<view class="type">当日成交</view>
				<view class="type">当日成交</view>
				<view class="type">当日成交</view>
			</view>
		</view>
		<view class="info-wrapper">
			<view class="title">
				<view class="title-title">京沪深</view>
				<view class="title-icon"></view>
			</view>
			<view class="action-wrapper">
				<view class="action-li">
					<view class="name">名称/时间</view>
				</view>
				<view class="action-li">
					<view class="name">委托/均价</view>
				</view>
				<view class="action-li">
					<view class="name">委量/成交</view>
				</view>
				<view class="action-li">
					<view class="name">状态</view>
				</view>
				<view class="action-li">
					<view class="name">操作</view>
				</view>
			</view>
			<view class="info-info-wrapper">
				<view class="info-info-list">
					<view class="value1">
						<view class="v1">宁波能源</view>
						<view class="v2"> 18:05:05</view>
					</view>
					<view class="value1">
						<view class="v1">3.680</view>
						<view class="v2">0.000</view>
					</view>
					<view class="value1">
						<view class="v1">1400.00</view>
						<view class="v2">0.00</view>
					</view>
					<view class="value1">
						<view class="v1">卖出</view>
						<view class="v2">未报</view>
					</view>
					<view class="value1">
						<view class="v3">撤</view>
					</view>
				</view>
				<!-- <view class="empty">
					<image src="../../static/trade/blocktrading/empty.png" mode=""></image>
					<view class="label">~暂无数据~</view>
				</view> -->
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		onLoad() {
			
		},
		methods: {
			
		}
	}
</script>
</script>

<style lang="scss">
	page{
		width: 100%;
		height: 100%;
		background-color: #F6F6FB;
	}
	.wrapper {
		height: 100%;
		box-sizing: border-box;
	}
	.header{
		width: 100%;
		background-color: #fff;
		.navigate{
			color: rgb(0, 0, 0);
			height: 44px;
			height: calc(44px + constant(safe-area-inset-top));
			height: calc(44px + env(safe-area-inset-top));
			padding: 7px 3px;
			padding-top: calc(7px + constant(safe-area-inset-top));
			padding-top: calc(7px + env(safe-area-inset-top));
			display: -webkit-box;
			display: -webkit-flex;
			display: flex;
			align-items: center;
			overflow: hidden;
			position: relative;
			-webkit-box-pack: justify;
			-webkit-justify-content: space-between;
			justify-content: space-between;
			box-sizing: border-box;
			z-index: 998;
			-webkit-transition-property: all;
			transition-property: all;
			.left{
				font-weight: 500;
				margin: 0 4rpx;
			}
			.center{
				width: 548rpx;
				height: 100%;
				position: absolute;
				top: 0;
				left: 50%;
				margin-left: -274rpx;
				text-align: center;
				color: #262626;
				display: flex;
				justify-content: center;
				align-items: center;
				.center-title-wrpper{
					.title{
						font-weight: bold;
						font-size: 28rpx;
						color: #262626;
					}
					.subtitle{
						font-size: 20rpx;
						color: #999999;
					}
				}
				.center-icon{
					position: relative;
					left: 5rpx;
					top: 2rpx;
				}
			}
			.right{
				margin-right: 30rpx;
			}
		}
	}
	.center-warpper{
		background: #fff;
		margin-bottom: 27rpx;
		padding-bottom: 20rpx;
		.ctype-wrapper{
			padding: 0 33rpx;
			box-sizing: border-box;
			height: 80rpx;
			line-height: 80rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1rpx solid #e5e5e5;
			.ctype-type-li{
				font-size: 28rpx;
				color: #999999;
				position: relative;
			}
			.active:after{
				content: '';
				width: 32rpx;
				height: 5rpx;
				background: #08377D;
				border-radius: 3rpx;
				position: absolute;
				left: 50%;
				margin-left: -16rpx;
				bottom: 0rpx;
				
			}
		}
		.type-list{
			display: flex;
			justify-content: center;
			align-items: center;
			margin: 24rpx auto 0;
			.type{
				width: 171rpx;
				height: 56rpx;
				line-height: 56rpx;
				text-align: center;
				font-size: 24rpx;
				color: #262626;
				background: #FFFFFF;
				border-radius: 0rpx 8rpx 8rpx 0rpx;
				border: 1px solid #E5E5E5;
			}
			.active{
				background-color: rgba(8, 55, 125, 0.02);
				color: #08377D;
			}
		}
	}
	.info-wrapper{
		background-color: #fff;
		.title{
			padding: 0 33rpx 10rpx;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			border-bottom: 1rpx solid #e5e5e5;
			.title-title{
				width: 100rpx;
				line-height: 70rpx;
				font-weight: bold;
				font-size: 32rpx;
				color: #262626;
				position: relative;
				margin-right: 30rpx;
			}
			.title-title:after{
				content: '';
				width: 32rpx;
				height: 5rpx;
				background: #08377D;
				border-radius: 3rpx;
				position: absolute;
				left: 50%;
				margin-left: -16rpx;
				bottom: 0rpx;
			}
			.title-icon{
				position: relative;
			}
			.title-icon::after{
				content: '';
				position: absolute;
				right: 0rpx;
				top: 0;
				width: 0;
				height: 0;
				border-left: 5px solid transparent;
				border-right: 5px solid transparent;
				border-top: 5px solid #999999;
			}
		}
		.action-wrapper{
			display: flex;
			justify-content: space-between;
			border-bottom: 1rpx solid #E5E5E5;
			border-top: 1rpx solid #E5E5E5;
			padding: 0 33rpx;
			.action-li{
				height: 71rpx;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				font-weight: 500;
				font-size: 24rpx;
				color: #999999;
				
				image{
					height: 23rpx;
					width: 23rpx;
					margin-right: 10rpx;
				}
				.label-ud{
					height: 19rpx;
					width: 13rpx;
					margin-left: 10rpx;
				}
			}
		}
		.info-info-wrapper{
			min-height: 400rpx;
			.info-info-list{
				padding: 10rpx 33rpx;
				font-weight: bold;
				font-size: 24rpx;
				color: #262626;
				line-height: 36rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-bottom: 1rpx solid #e5e5e5;
				.value1{
					
				}
				.v3{
					width: 44rpx;
					height: 44rpx;
					line-height: 44rpx;
					text-align: center;
					border-radius: 10rpx;
					border: 1rpx solid #e5e5e5;
				}
			}
		}
		.empty {
			width: 244rpx;
			height: 113rpx;
			margin: 100rpx auto;
			text-align: center;
			font-size: 24rpx;
			color: #999999;

			image {
				width: 100%;
				height: 100%;
			}
		}
	}
</style>